import React from 'react';
import styled from "styled-components";

interface AreaBaseProps {
  areaName:string;
  children:React.ReactElement
}

const AreaBaseWarp = styled.div<{ areaName: string }>`
  grid-area: ${({ areaName }) => areaName};
  /* border: 1px solid hotpink; */
  // 记得加这个,不然内容会把格子撑开
  overflow: hidden;
  position: relative;
`;
const AreaBaseImg = styled.img`
  width: 100%;
  height: 100%;
  font-size: 16px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
`;

function AreaBase(props:AreaBaseProps) {
  return (
    <AreaBaseWarp
      areaName = {props.areaName}
    >
      <AreaBaseImg src={require("@/assets/img/common/panel.png")} alt="" />
      AreaBase
    </AreaBaseWarp>
  );
}

export default AreaBase;
